<template>
    <!-- 上面搜索栏部分 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon>
                <span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px" class="box-bottom">
            <div>

                <el-form @submit.prevent="submitFn" ref="searchFormRef" :model="listParams">
                    <el-form-item label="广告名称:" label-width="120px" prop="name">
                        <!-- @keyup.enter 回车事件 -->
                        <!-- <el-input v-model="listParams.keyword" placeholder="请输入账号、姓名" @keyup.enter="submitFn" /> -->
                        <el-input v-model="listParams.name" placeholder="广告名称" />
                    </el-form-item>
                </el-form>
            </div>

            <div>
                <el-form @submit.prevent="submitFn" ref="searchFormRefW" :model="listParams">
                    <el-form-item label="广告位置:" label-width="120px" prop="type">
                        <el-select v-model="listParams.type" class="m-2" placeholder="全部">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>


            <div>
                <el-form @submit.prevent="submitFn" ref="searchFormRefT" :model="listParams">
                    <el-form-item label="结束时间:" label-width="120px" prop="endTime">
                        <el-date-picker v-model="listParams.endTime" type="date" placeholder="请选择结束时间" :size="size" />
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button @click="addUser">添加广告</el-button>
    </div>

    <!-- table表格部分 -->
    <el-table :data="listt" style="width: 100%" @selection-change="handleSelectionChange" border>

        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="name" label="广告名称"></el-table-column>
        <el-table-column filter-placement="status" prop="nickName" label="广告位置">
            <template #default="scope">
                {{ scope.row.type ? 'APP首页轮播' : 'PC首页轮播' }}
            </template>

        </el-table-column>
        <!-- <el-table-column prop="pic" label="广告图片"></el-table-column> -->
        <el-table-column label="广告图片">
            <template #default="scope">
                <img :src="scope.row.pic" width="40" height="40" class="head_pic" />
            </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createTime" label="时间">
            <template #default="scope">
                开始时间：
                {{ fomatDate(scope.row.endTime) }}
                到期时间：
                {{ fomatDate(scope.row.startTime) }}
            </template>
        </el-table-column>

        <!-- 是否启用 -->
        <el-table-column label="上线/下线">
            <!-- 通过插件得到的scope是每一列里面的 数据对象 -->
            <template #default="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                    @change="changeHandle(scope.row)">
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="clickCount" label="点击次数"></el-table-column>
        <el-table-column prop="orderCount" label="生成订单"></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" @click="handleEdit(scope.row.id)">
                    编辑
                </el-button>
                <el-button link type="primary" @click="editHandle(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="bottom">
        <div>
            <!-- 选择器 -->
            <el-select v-model="value" class="m-2" placeholder="批量操作" size="large" placement="top-start">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" @click="surefn(value)">确定</el-button>
        </div>

        <!-- 底部分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="state.total" @size-change="pageSizeChagne"
                @current-change="currentChagne" :page-sizes="[5, 10, 15]" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { user } from '@/api';
import { fomatDate } from '@/utils';
import { reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox, ElTable, FormInstance } from "element-plus";
import { Search, Warning } from "@element-plus/icons-vue";
import { router } from "@/router";

const size = ref<'' | 'large' | 'small'>('')
const searchFormRef = ref<FormInstance>();
const searchFormRefT = ref<FormInstance>();
const searchFormRefW = ref<FormInstance>();

const resetForm = () => {
    searchFormRef.value?.resetFields();
    searchFormRefT.value?.resetFields();
    searchFormRefW.value?.resetFields();
};

// 用来搜索框方法，进行重新渲染
const submitFn = () => {

    // 搜索一定要把页码回到第一页
    state.listParams.pageNum = 1
    // 重新请求一个数组回来把数据渲染到表格里面
    advertiseAPI();
};

interface List {
    listt: advertiseList[];
    listParams: sb;
    total: number


}
const state = reactive<List>({
    listt: [],
    listParams: {
        pageNum: 1,
        pageSize: 5,
        name: "",
        endTime: '',
        type: ''
    },
    total: 0,
})
//请求
const advertiseAPI = () => {
    user.advertiseListApi(state.listParams).then(res => {
        if (res.code === 200) {
            state.listt = res.data.list
            state.total = res.data.total
            // console.log(res.data.list);
        }

    })
}
advertiseAPI()

const pageSizeChagne = () => {
    advertiseAPI()
}
const currentChagne = (val: number) => {
    advertiseAPI()
}
//添加
const addUser = () => {
    router.push(`/sms/updateAdvertise`)
}
const changeHandle = (row: IUserModel) => {
    ElMessageBox.confirm("提示", "是否修改上线/下线状态", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        user.advertiseupdatestatus({
            id: row.id,
            status: row.status,
        })
    }).catch((err) => {
        console.log(err);
        row.status = row.status === 1 ? 0 : 1;
        advertiseAPI()
    })
}
//编辑
const handleEdit = (ID: number) => {
    router.push(`/sms/updateAdvertise?id=${ID}`)

}
const editHandle = (ID: number[]) => {
    console.log(ID);
    ElMessageBox.confirm("提示", "是否要删除该广告", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        user.advertiseDelete(ID).then(res => {
            if (res.code === 200) {
                advertiseAPI()
            }
        })
    }).catch(() => {

    })

}


const value = ref('')
const options = [
    {
        value: 'Option1',
        label: '删除',
    }]
const options2 = [
    {
        value: 0,
        label: 'PC首页轮播',
    },
    {
        value: 1,
        label: 'APP首页轮播',
    },
]
const surefn = (val: string) => {
    // console.log(val);
    if (val) {
        user.advertiseDelete(multipleSelection.value).then(res => {
            if (res.code === 200) {
                advertiseAPI()
            } else {
                ElMessage.warning('请选择一条数据')
            }
        })
    } else {
        ElMessage.warning('请选择一条数据')
    }

}






//111


// const multipleSelection = ref<User[]>([])
const multipleSelection = ref<number[]>([])

const handleSelectionChange = (val: any) => {
    console.log(val);

    val.map((item: { id: number; }) => {
        multipleSelection.value.push(item.id)

    })
    console.log(multipleSelection.value);

}

const { listt, listParams } = toRefs(state)

</script>
<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .box-bottom {
        display: flex;

    }

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }

    .el-button {
        margin-right: 10px;
    }

}

.bottom {
    display: flex;
    justify-content: space-between;
}

.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px gray;
    margin-bottom: 30px;

    .box-bottom {
        display: flex;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    .el-icon {
        margin-right: 10px;
    }

    .el-input {
        width: 250px;
    }

    .el-select {
        width: 250px;
    }
}
</style>